<template>
  <!-- 底部部分 => list有数据的时候，才展示  list.length > 0 -->
  <footer  class="footer" v-if='list.length>0'>
    <span class="todo-count"><strong>{{leftCounts}}</strong>剩余</span>
    <ul class="filters">
      <li>
        <a @click="filter('all')"  :class="{selected: type==='all'}" href="#/" >全部</a>
      </li>
      <li>
        <a @click="filter('active')"   href="#/active"  :class="{selected: type==='active'}">进行中</a>
      </li>
      <li>
        <a @click="filter('completed')" href="#/completed" :class="{selected: type==='completed'}">已完成</a>
      </li>
    </ul>
    <!-- 有已完成的任务，才需要显示这个按钮 -->
    <button  class="clear-completed" v-if='isshowClear' @click='clear'>清除已完成</button>
  </footer>
</template>

<script>
export default {
  props:{
    list:Array,
    type:String,
  },
  // data() {
  //   return {
  //     type:'all'   //all是所有 active进行中 completed已完成 
  //   }
  // },
  methods:{
    clear() {
      this.$emit('clear')
    },
    filter(type) {
      // this.type=type
      this.$emit('changeType', type)
    }
  },
  computed:{
    leftCounts() {
      return this.list.filter(item=>item.isDone===false).length
    },
    isshowClear() {
      return this.list.some(item=>item.isDone===true)
    }
  }
}
</script>

<style></style>
